<template>
  <Form :model="form.data" :label-position="form.labelPosition"
        :label-width="form.labelWidth"
        :rules="ruleValidate" :ref="form.name">
    <Row>
      <i-col :span="24/form.colNumber" :key="index" v-for="(item,index) in form.columns">
      <Form-item :label="item.label" :prop="item.name">

        <i-input v-model="form.data[item.name]" :type="item.type" :placeholder="item.placeholder"
               v-if="item.type=='text'"></i-input>

        <template v-else-if="item.type=='select'">
          <Select v-model="form.data[item.name]" :placeholder="item.placeholder">
            <Option :value="o.value" v-for="o in item.items" :key="o.index">{{o.name}}</Option>
          </Select>
        </template>

        <template v-else-if="item.type=='radio'">
          <Radio-group v-model="form.data[item.name]">
            <Radio :label="o.label" v-for="o in item.items" :key="o.index">{{o.name}}</Radio>
          </Radio-group>
        </template>

        <template v-else-if="item.type=='date'">
          <Date-picker type="date" :placeholder="item.placeholder?item.placeholder:'选择日期'"
                       v-model="form.data[item.name]"></Date-picker>
        </template>

        <template v-else-if="item.type=='time'">
          <Date-picker type="time" :placeholder="item.placeholder?item.placeholder:'选择时间'"
                       v-model="form.data[item.name]"></Date-picker>
        </template>

        <template v-else-if="item.type=='checkbox'">
          <Checkbox-group v-model="form.data[item.name]">
            <Checkbox :label="o.label" v-for="o in item.items" :key="o.index">{{o.name}}</Checkbox>
          </Checkbox-group>
        </template>

        <template v-else-if="item.type=='textarea'">
          <i-input type="textarea" :placeholder="item.placeholder?item.placeholder:'请输入...'"
                 v-model="form.data[item.name]" :rows="item.rows"
                 :autosize="{minRows: item.minRows,maxRows: item.maxRows}"
          ></i-input>
        </template>
        <template v-else>

        </template>

      </Form-item>
      </i-col>
    </Row>
    <Row v-if="form.showOpt">
      <Form-item>
        <Button type="primary" @click="handleSubmit()">提交</Button>
        <Button type="default" @click="handleReset()" style="margin-left: 8px">重置</Button>
      </Form-item>
    </Row>
  </Form>
</template>
<script>
import Log from '../../utils/Log';
import deepExtend from 'deep-extend';

export default{
    name: 'UForm',
    props: {
        data: {
            type: Object
        }
    },
    created () {
        let defaultForm = {
            name: 'formName', // 表单名称，如果同一个页面存在多个表单时，需要指定不同的名称
      // label对齐方式
            labelPosition: 'right',
      // label的宽度
            labelWidth: 80,
      // 每行显示的个数
            colNumber: 2,
      // 显示操作按钮
            showOpt: true,
            columns: [],
      // 表单提交之前（校验之后），返回如果为false,则不继续执行后续操作
            submitBefore: function (data) {
                return true;
            },
      // 表单提交之后
            submitAfter: function (response) {
                return true;
            },
      // 点击取消时的操作，默认为关闭窗口
            onCancel: function () {

            },
            data: {}// 表单提交的参数
        };
        this.form = deepExtend(defaultForm, this.data);
        Log.d('form :%o', this.form);
    // 生成表单规则校验
        let ruleValidate = {};
        if (this.form.columns) {
            this.form.columns.forEach((c) => {
                let ruleName = c.name;
        // 直接写required的话，采用默认提示规则。写了rule属性则使用rule
                if (c.required && !c.rule) {
                    let trigger = 'blur';
          // 固定的几种类型采用change事件监听
                    ['select', 'radio', 'date', 'time', 'checkbox'].forEach((type) => {
                        if (c.type === type) {
                            trigger = 'change';
                        }
                    });
                    let rule = {required: true, message: c.label + '不能为空', trigger: trigger};
                    ruleValidate[ruleName] = [rule];
                } else {
          // 其他自定义格式直接采用原生格式（参见iview组件当中的form表单验证格式）
                    ruleValidate[ruleName] = c.rule;
                }
            });
        }
        this.ruleValidate = ruleValidate;
    // 针对type为select的数据，进行额外处理
    /* if (this.form.columns) {
          for(let c of this.form.columns){

          }
      } */
    },
    data () {
        return {
            form: {
                data: {}// 表单提交的参数
            },
      // 表单规则校验
            ruleValidate: {}
        };
    },
    methods: {
    // 模态窗口点击确认按钮事件
        handleSubmit () {
            this.$refs[this.form.name].validate((valid) => {
                if (valid) {
                    if (!this.form.submitBefore(this.form.data)) {
                        return;
                    }
                    this.$axios.post(this.form.actionUrl, {data: this.form.data}).then(response => {
                        this.$Message.success('提交成功!');
                        this.handleReset();
                        this.form.submitAfter(response);
                    });
                } else {
                    this.$Message.error('表单验证失败!');
                }
            });
        },
    // 重置表单
        handleReset () {
            this.$refs[this.form.name].resetFields();
        }
    }

};
</script>
